---
title: "Code"
description: "Code is a component used to display inline code. "
---

import {codeContent} from "@/content/components/code";

# Code

Code is a component used to display inline code.

<ComponentLinks component="code" rscCompatible />

---

<CarbonAd/>

## Installation

<PackageManagers
  showGlobalInstallWarning
  commands={{
    cli: "npx heroui-cli@latest add code",
    npm: "npm install @heroui/code",
    yarn: "yarn add @heroui/code",
    pnpm: "pnpm add @heroui/code",
    bun: "bun add @heroui/code"
  }}
/>


## Import

<ImportTabs
  commands={{
    main: 'import {Code} from "@heroui/react";',
    individual: 'import {Code} from "@heroui/code";',
  }}
/>

## Usage

<CodeDemo title="Usage" files={codeContent.usage} />

### Sizes

<CodeDemo title="Sizes" files={codeContent.sizes} />

### Colors

<CodeDemo title="Colors" files={codeContent.colors} />

<Spacer y={4} />

## API

### Code Props

<APITable
  data={[
    {
      attribute: "children",
      type: "ReactNode",
      description: "The content of the code.",
      default: "-"
    },
    {
      attribute: "size",
      type: "sm | md | lg",
      description: "The size of the code.",
      default: "sm"
    },
    {
      attribute: "color",
      type: "default | primary | secondary | success | warning | danger",
      description: "The color of the code.",
      default: "default"
    },
    {
      attribute: "radius",
      type: "none | sm | md | lg | full",
      description: "The radius of the code.",
      default: "sm"
    }
  ]}
/>
